<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>

    </table>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>

        $(function(){
            console.log('加载完成');

            let data=window.location.search;
            let id=data.replace('?','');
            console.log(id);

            $.get(`http://localhost:8888/blog/${id}`,data=>{
                let tb=$('table')
                
                let list=data.data;
                console.log(list);

                let html=`
                <tr hidden>
                    <td>ID</td>
                    <td><input type="text" name="id" value="${list.id}"></td>
                </tr>
                <tr>
                    <td>标题</td>
                    <td><input type="text" name="title" value="${list.title}"</td>
                </tr>
                <tr>
                    <td>摘要</td>
                    <td><input type="text" name="digest" value="${list.digest}"</td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td><input type="text" name="content" value="${list.content}"</td>
                </tr>
                <tr>
                    <td>分类</td>
                    <td><input type="text" name="sort" value="${list.sort}"</td>
                </tr>
                <tr>
                    <td>作者</td>
                    <td><input type="text" name="author" value="${list.author}"</td>
                </tr>
                <tr>
                    <td><input type="button" value="取消" onclick="cancel()"></td>
                    <td><input type="button" value="保存" onclick="save(${list.id})"></td>
                </tr>
                `
                 tb.append(html);

            })

        })

        function cancel(){
            window.location.href='./index.html'
        }
        function save(id){
            console.log(id);

            let title=$('[name=title]').val();
            let digest=$('[name=digest]').val();
            let content=$('[name=content]').val();
            let sort=$('[name=sort]').val();
            let author=$('[name=author]').val()

            let obj={
                title,
                digest,
                content,
                sort,
                author
            }
            console.log(obj);

            $.ajax({
                url:`http://localhost:8888/blog/${id}`,
                type:'put',
                data:obj,
                success:function(data){
                    window.location.href='./index.html'
                }
            })
        }

    </script>
</body>
</html>